/**
 * Created by Dalyn on 2017/2/28.
 */
import React from "react";
import { hashHistory, Link } from 'react-router';
import Relay from "react-relay";
import listOrderMutation from "./mutation/ListOrderMutation";
import Util from "../../util/Util";
import Pagination from "./Pagination";
import { Table,Menu, Dropdown, Icon, message } from 'antd';
import { Button } from 'fly';
import "./css/orderPaymentList.css";
import "./css/account_common.css";
import InputBox from '../../common/InputBox';
/*信息列表*/
export default class OrderPaymentList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            orders:[],
            pageSize:10,
            pageNum:1,
            totalResult:0,
            searchFlag:true,
            inputValue:"",
            loading: true
        };
        this.style = {
            payment: {
                height:'37px',
                padding:"0px",
                borderLeft: "1px solid rgb(228, 228, 228)",
                cursor:'pointer'
            },
            finish: {
                height:'37px',
                padding:"0px",
                // borderLeft: "1px solid rgb(228, 228, 228)"
            },
            paymentButton:{
                border:'1px solid #36b3b3',
                padding:'5px 14px',
                color:'#36b3b3',
                background:'#fff',
                /*-webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;*/
                userSelect: "none",
            },
            finishButton:{
                border:"none",
            },
            input:{
                width: "200px",
                height: "28px",
                border: '1px solid #ededed',
                borderRadius: '2px',
                paddingLeft: '12px',
            },
            search: {
                width: '85px',
                height: '30px',
                backgroundColor: "#36b3b3",
                fontSize: "16px",
                color: "#fff",
                // marginTop: "16px",
                marginLeft: "20px",
                fontFamily: "Microsoft YaHei",
                borderRadius: "8px"
            }
        };
        this.odtail='2';
        this.ods='';
        this.enid=sessionStorage.getItem('enterpriseId');
        this.goodtypeobj={'1':'成衣','2':'辅料','3':'面料','4':'印染','5':'纱线'};
        this.odsobj={'-1':'待创建',0:'待发布',1:'待接单',2:'待签订',3:'已签订',4:'交易完成'};
    }

    componentWillMount(){
        this.queryOrderList(10,1);
    }
    /*查询数据*/
    queryOrderList(pageSize, pageNum, isSearch){
        if(this.state.searchFlag){
            Relay.Store.commitUpdate(
                new listOrderMutation({
                    pageSize: pageSize,
                    pageNum: pageNum,
                    /*采购订单*/
                    type:this.odtail,
                    enId:this.enid,
                    /*已签订的*/
                    status:"3,4",
                    enName:this.state.inputValue,
                    isOnlineBalance: 1
                }),
                {
                    onFailure: () => {
                        message.error("请求失败")
                    },
                    onSuccess: (response) => {
                        let errorCode = response.listOrder.listOrder.errorCode;
                        if(errorCode=='0'){
                            let orders = response.listOrder.listOrder.orders;
                            let totalResult = response.listOrder.listOrder.totalResult;
                            let value = response.listOrder.listOrder.value;
                            this.setState({
                                orders:orders,
                                totalResult:totalResult
                            },()=>{
                                this.setState({ loading: false });
                                if (isSearch) {
                                  this.refs.pagination.setState({
                                      text:1,
                                  })
                                } else {
                                  this.refs.pagination.setState({
                                      text:this.state.pageNum,
                                  })
                                }
                            });
                        } else {
                            message.error(value)
                        }
                        // console.log(response )
                    }
                }
            )
        }
    }
    /*页码*/
    onSure(size,num){
        this.num = num;
        this.setState({
            loading:true,
            pageNum:num,
        },()=>{
          this.queryOrderList(10,num)
        })
    }
    /*搜索*/
    search(){
        this.queryOrderList(10,1,1);
    }

    /*交易输入的企业名称*/
    changeInput(e){
      this.setState({
        inputValue: this.refs.enName.state.text
      })
    }

    render(){
        const columns = [
            {
                title: '订单编号',
                dataIndex: 'oid',
                key: 'oid',
                render: (text, record) =>{
                    return(
                        <span title={record.oid}>{record.oid}</span>
                    )
                }
            },
            {
                title: '供应方',
                dataIndex: 'partBName',
                key: 'partBName',
                render: (text, record) =>{
                    return(
                        <span title={record.partBName}>{record.partBName}</span>
                    )
                }
            },
            {
                title: '商品类型',
                dataIndex: 'orderType',
                key: 'orderType',
                render:(text, record, index) =>{
                    return <span className="">{this.goodtypeobj[record.orderType]}</span>
                }
            },
            {
                title: '数量',
                dataIndex: 'orderGoodsNum',
                key: 'orderGoodsNum',
                render: (text, record) =>{
                    return(

                        <span>{!record.orderGoodsNum?"0":Number(record.orderGoodsNum).toFixed(3)}</span>
                    )
                }
            },
            {
                title: '剩余数量',
                dataIndex: 'remainOrderGoodsNum',
                key: 'remainOrderGoodsNum',
                render:(text, record, index) =>{
                    /*总数量-已确定发货数量*/
                    return <span className="">{Number(record.orderGoodsNum-record.remainOrderGoodsNum).toFixed(3)}</span>
                }
            },
            {
                title: '订单金额（元）',
                dataIndex: 'account',
                key: 'account',
                render: (text, record) =>{
                    return(
                        <span>{Util.doubleFormat(parseFloat(record.account/100).toFixed(2))}</span>
                    )
                }
            },
            {
                title: '已付款（元）',
                dataIndex: 'payAccount',
                key: 'payAccount',
                render: (text, record) =>{
                    return(
                        <span >{Util.doubleFormat(parseFloat(record.payAccount/100).toFixed(2))}</span>
                    )
                }
            },
            {
                title: '订单状态',
                dataIndex: 'status',
                key: 'status',
                render:(text, record, index) =>{
                    return <span className="">{this.odsobj[record.status]}</span>
                }
            },
            {
                title: '操作',
                dataIndex: 'operate',
                key: 'operate',
                width: 100,
                render:(text, record, index) =>{
                    let _this = this;
                    const fun = {
                        jumpDetail:()=>{
                            hashHistory.push({pathname:'/OrderIndex/',state:{
                                'record':record,
                                "defaultActiveKey":1,
                            }})
                        },
                        jumpPayment:()=>{
                            hashHistory.push({pathname:'/payment/',state:{'oid':record.oid}});
                        },
                    };

                    const menuItem = [
                        {key:"payment",iconType:"red-envelope",text:"付款",onClick:()=>{fun.jumpPayment();}},
                        {key:"detail",iconType:"file-text",text:"查看详情",onClick:()=>{fun.jumpDetail()}},
                    ];
                    const menu = (
                        <Menu
                            className="listOrder_purchase_dropDown_menu"
                        >
                            {
                                menuItem.map((v,i)=>{
                                    if(record.status == 3){
                                        if(v.key == "payment"||v.key == "detail"){
                                            return (
                                                <Menu.Item key={v.key}>
                                                    <span className="listOrder_purchase_dropDown_menuItem" onClick={v.onClick}><Icon type={v.iconType} className="listOrder_purchase_dropDown_menuItem_icon"/>{v.text}</span>
                                                </Menu.Item>
                                            )
                                        }
                                    }else {
                                        if(v.key == "detail"){
                                            return (
                                                <Menu.Item key={v.key}>
                                                    <span className="listOrder_purchase_dropDown_menuItem" onClick={v.onClick}><Icon type={v.iconType} className="listOrder_purchase_dropDown_menuItem_icon"/>{v.text}</span>
                                                </Menu.Item>
                                            )
                                        }
                                    }
                                })
                            }
                        </Menu>
                    );
                    return (
                        <Dropdown overlay={menu} placement="bottomLeft">
                            <Icon type="ellipsis" className="listOrder_purchase_dropDown_icon"/>
                        </Dropdown>
                    )
                }
            },

            /*{
                title: '操作',
                dataIndex: 'operate',
                key: 'operate',
                onCellClick:(record, event)=>{
                    const {status,oid} = record;
                    /!*允许点击支付*!/
                    if(status =="4" ){
                        return ;//已完成订单不需要支付
                    }else{
                        /!*hashHistory.push("/payment/"+oid);*!/
                        hashHistory.push({pathname:'/payment/',state:{'oid':oid}});
                    }
                },
                render: (text, record) =>{
                    return(
                        <span style={record.status == '4'?this.style.finish:this.style.payment}>
                            <span style={record.status == '4'?this.style.finishButton:this.style.paymentButton}>{record.status == '4'?"交易完成":"付款"}</span>
                        </span>
                    )
                }
            },*/
            /*{
                title: '收货记录',
                dataIndex: 'receiveRecord',
                key: 'receiveRecord',
                onCellClick:(record, event)=>{
                    const {oid,orderType} = record;
                    hashHistory.push({pathname:'/receiveGoodsItem/',state:{'oid':oid,'odt':orderType}});
                },
                render: (text, record) =>{
                    return(
                        <span className="recharge_pay_tb_tbha">查看</span>
                    )
                }
            },*/
            /*{
                title: '订单进度',
                dataIndex: 'orderProcess',
                key: 'orderProcess',
                onCellClick:(record, event)=>{
                    const {oid} = record;
                    hashHistory.push({pathname:'/OrderProgress/',query:{'oid':oid}});
                },
                render: (text, record) =>{
                    return(
                        <span className="recharge_pay_tb_tbha">查看</span>
                    )
                }
            },*/
            /*{
                title: '订单详情',
                dataIndex: 'orderDetail',
                key: 'orderDetail',
                onCellClick:(record, event)=>{
                    const {oid,orderType} = record;
                    switch (orderType){
                        case 0:
                            return;
                        case 1:
                            hashHistory.push('/orderdetailgms/'+oid);
                            // hashHistory.push({pathname:'/orderdetailgms/',state:{'oid':oid}})
                            return;
                        case 2:
                            hashHistory.push('/orderdetailraw/'+oid);
                            // hashHistory.push({pathname:'/orderdetailraw/',state:{'oid':oid}})
                            return;
                        case 3:
                            hashHistory.push('/orderdetailcloth/'+oid);
                            // hashHistory.push({pathname:'/orderdetailcloth/',state:{'oid':oid}})
                            return;
                        case 4:
                            hashHistory.push('/orderdetailprint/'+oid);
                            // hashHistory.push({pathname:'/orderdetailprint/',state:{'oid':oid}})
                            return;
                        case 5:
                            hashHistory.push('/orderdetailyarn/'+oid);
                            // hashHistory.push({pathname:'/orderdetailprint/',state:{'oid':oid}})
                            return;

                    }
                },
                render: (text, record) =>{
                    return(
                        <span className="recharge_pay_tb_tbha">查看</span>
                    )
                }
            }*/
        ];
        const orders = ( null == this.state.orders || this.state.orders.length == 0)?[]:this.state.orders;
        return (
            <div className="recharge_order_pay_box">
                <div className="recharge_loan_set_search clear">
                    <div className="recharge_loan_set_searchInp">
                        <span className="recharge_loan_set_searchInp_sp">企业名称：</span>
                        <div style={{display:"inline-block",marginLeft:'20px',marginRight:'-3px'}}>
                            <InputBox className="order_saleandre_frome_search_input pro_overflow_inputSty "
                                      space={20}
                                      ref={"enName"}
                                      style={this.style.input}
                                      defaultvalute="请输入企业名称进行搜索"
                                      changeon={this.changeInput.bind(this)}
                            />
                        </div>
                                {/*<input style={this.style.input} value={this.state.inputValue} placeholder="请输入企业名称" onChange={this.changeInput.bind(this)} />*/}
                    </div>
                    <div className="recharge_loan_set_searchBtn">
                        <Button className="recharge_loan_set_searchBtn_span" onClick={this.search.bind(this)}>搜索</Button>
                    </div>
                </div>
                <Link to={'paymentHistory'}><Button className="recharge_loan_set_btn" type="primary">支付历史记录</Button></Link>
                <Table
                    columns={columns}
                    dataSource={orders}
                    pagination={false}
                    rowKey={record => record.oid}
                    style={{width:'100%',clear:"both"}}
                    className="order_table"
                    loading={this.state.loading}
                    // bordered
                />
                <Pagination eachSize={this.state.pageSize} dataSize={this.state.totalResult} onSure={this.onSure.bind(this)} ref={'pagination'}/>
            </div>
        )
    }
}
